<template>
	<yd-layout id='courseAudioDetail' class=''>
		<!--@canplay='canplay' 用这个可能会有1秒的延迟-->
			<!--controls="controls"-->
		<audio ref='audioRef' @canplaythrough='canplaythrough' class="audio_audio" controls="controls">
			<source :src="dataObj.url">
			<source :src="dataObj.url"> 您的浏览器不支持 audio 元素。
		</audio>
		<div class="header">
			<div class="header_img" :class="false?'header_2':''">
				<img class="header_video_img_1" src="../../assets/audioDetail_5.png" />
				<img v-if="mp3Play" class="header_video_img_2" src="../../assets/audioDetail_7.png" />
				<img v-else class="header_video_img_2" src="../../assets/audioDetail_6.png" />
			</div>
			
			<div class="header_video">
				<img @click="palyAudio" v-if="!mp3Play" class="auto_img" src="../../assets/audioDetail_3.png" alt="" />
				<img @click="palyAudio" v-else class="auto_img" src="../../assets/audioDetail_2.png" alt="" />
				<div class="auto_right">
					<div class="auto_time_1">{{audioPlayTime}}</div>
					<div class="auto_xian">
						<van-slider :disabled='disabled' v-model="palyVal" bar-height="4px" active-color="#35BF7E" @change="onChange" @input='onInput' />
					</div>
					<div class="auto_time_2">{{audioAllTime}}</div>
				</div>
			</div>
		</div>
		<div class="content">
			<div class="hader_title">
				<div class="title c_size_34_48">{{dataObj.title}}</div>
				<div class="label">
					<div class="label_people">{{dataObj.watch_count}}人已播放</div>
					<!--!$route.query.collect-->
					<template v-if="false">
						<div v-if='dataObj.collected==1'  style='background: #999999;' class="btn" @click="collect(1)">已收藏</div>
						<div  v-else class="btn" @click="collect">收藏</div>
					</template>
				</div>
			</div>
			<template v-if="palyList.length>0">
				<div class="play_list">
					<div class="play_list_title c_size_34_48">播放列表</div>
					<div class="paly_list_item_f_f">
						<div class="paly_list_item_f" ref='playListRef' :style="playListStyle">
							<div ref='playListItemRef' @click="refresh(item)" v-for="item,index in palyList" class="width_paly_list_item">
								<div  :class="item.vid==dataObj.id?'paly_active':''" class="paly_list_item" >
									<div  class="paly_list_item_content c_text_ellipsis_2">{{index+1}}、{{item.vtitle}}</div>
									<div v-if="item.vid==dataObj.id" class="paly_list_item_label">正在播</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</template>
			<div class="student_list">
				<div class="play_list_title c_size_34_48">学习感悟</div>
				<div class="student_label">收听课程后，写下你的心得与收获</div>
				<div class="list_item">
					<yd-infinitescroll :callback="getCommetnList" ref="infinitescrollDemo">
						<StudentShareList  slot="list"  :dataList='commentList'></StudentShareList>
						<!-- 数据全部加载完毕显示 -->
				        <span slot="doneTip"></span>
				
				        <!-- 加载中提示，不指定，将显示默认加载中图标 -->
				        <!--<img slot="loadingTip" src="path/img/loading.svg"/>-->
					</yd-infinitescroll>
					
				</div>
			</div>
		</div>
		<div slot='bottom' class="study_bottom_f">
			<div @click="$router.push({name:'audioStudentShare',query:{oid:videoId,kind:100}})" class="study_bottom">写写学习感悟~</div>
		</div>
		<yd-backtop></yd-backtop>
	</yd-layout>
</template>

<script>
	
	import { Slider } from 'vant';
	import StudentShareList from '../../components/StudentShareList/StudentShareList.vue'
	import { InfiniteScroll } from 'vue-ydui/dist/lib.rem/infinitescroll';
	import {BackTop} from 'vue-ydui/dist/lib.rem/backtop';
	let setTimeCourse = ''
	export default {
		components: {
			[Slider.name]:Slider,
			[StudentShareList.name]:StudentShareList,
			[InfiniteScroll.name]: InfiniteScroll,
			[BackTop.name]:BackTop,
		},
		data() {
			return {
				commentList:[],
				pageNum:1,
				pageCount:10,
				dataObj:{},
				playListStyle:{
					width:''
				},
				dataObj:{},
				palyList:[],
				videoId:'',
				
				palyVal: 0,
				mp3Play: true,
				audioAllTime: '00:00', //总时长
				audioPlayTime: '00:00', //播放时间
				palyTime: 1,
				disabled: true,
			}
		},
		created() {

		},
		watch: {

		},
		computed: {

		},
		destroyed (){
			clearTimeout(setTimeCourse)
		},
		mounted() {
			document.title = '音频详情'
			this.videoId=this.$route.query.id
			this.getVideoDetail()
			this.getCommetnList()
		},
		methods: {
			onChange(val) {
				let audio = this.$refs.audioRef
				let time = this.$refs.audioRef.duration
				console.log('说', val)
				if(val >= 100) {
					clearTimeout(setTimeCourse)
					this.mp3Play = true
					audio.pause()
					this.palyVal = val
					this.palyTime = time
					this.audioPlayTime = (parseInt(this.palyTime / 60) >= 10 ? parseInt(this.palyTime / 60) : '0' + parseInt(this.palyTime / 60)) + ':' +
						(parseInt(this.palyTime % 60) >= 10 ? parseInt(this.palyTime % 60) : '0' + parseInt(this.palyTime % 60))
				} else {
					this.palyTime = parseInt(time * (val / 100))
					clearTimeout(setTimeCourse)
					audio.play()
					this.mp3Play = false
					audio.currentTime = this.palyTime; //减少误差
					this.palyTimeFun(time)

				}

			},
			//拖动的时候触发
			onInput(val) { 
				
				if(setTimeCourse) {
					let audio = this.$refs.audioRef
					audio.pause() 
					clearTimeout(setTimeCourse)
				}
			},
			//音频已经准备好
			canplaythrough() {
				if(!this.mp3Play) {
					let time = this.$refs.audioRef.duration
					if(time > 0) {
						this.disabled = false;
					}
					let min = parseInt(time / 60) >= 10 ? parseInt(time / 60) : '0' + parseInt(time / 60)
					let s = parseInt(time % 60) >= 10 ? parseInt(time % 60) : '0' + parseInt(time % 60)
					let strTime = min + ':' + s
					this.audioAllTime = strTime
					this.palyTimeFun(time)
				}
			},
			//自己的时间处理
			palyTimeFun(time) {
				if((!this.mp3Play) && time) {
					setTimeCourse = setTimeout(() => {
						this.palyVal = parseFloat(Math.ceil(this.palyTime / time * 100))
						this.audioPlayTime = (parseInt(this.palyTime / 60) >= 10 ? parseInt(this.palyTime / 60) : '0' + parseInt(this.palyTime / 60)) + ':' +
							(parseInt(this.palyTime % 60) >= 10 ? parseInt(this.palyTime % 60) : '0' + parseInt(this.palyTime % 60))
						//					let min = parseInt(this.palyTime/60)>=10?parseInt(this.palyTime/60):'0'+parseInt(this.palyTime/60)
						//					let s = parseInt(this.palyTime%60)>=10?parseInt(this.palyTime%60):'0'+parseInt(this.palyTime%60)
						//					this.audioPlayTime = min + ':' +s
						this.palyTime++;
						if(this.palyTime >= time) {
							this.mp3Play = true
							this.$refs.audioRef.pause()
							this.palyVal = 100

						} else {
							this.palyTimeFun(time)
						}
					}, 1000)
				}

			},
			//播放
			palyAudio() {
				console.log(this.$refs.audioRef.duration)
				let audio = this.$refs.audioRef
				let time = this.$refs.audioRef.duration
				if(this.palyTime >= time) {
					audio.loop = true
					this.audioPlayTime = '00:00'
					this.palyVal = 0
					this.mp3Play = false
					this.palyTime = 1;
					audio.play()
					this.palyTimeFun(time)
				} else {
					if(this.mp3Play) {
						audio.play()
						//播放
						this.mp3Play = false
						if(!this.mp3Play && this.palyTime > 1) {
							audio.currentTime = this.palyTime; //减少误差

							this.palyTimeFun(time)
						}
					} else {
						//暂停
						this.mp3Play = true
						audio.pause()
						clearTimeout(setTimeCourse)
					}
				}

			},
			//重新加载其他的
			refresh(item){
				this.videoId=item.id
				this.getVideoDetail(true)
				this.disabled = true
				this.pageNum=1;
				this.pageCount=10;
				this.commentList=[]
				this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.reInit');
				this.getCommetnList()
			},
			getCommetnList(){
				this.$root.ajax({
					name: 'comment/lst',
					type:'get',
					params: {
						page:this.pageNum,
						count:this.pageCount,
						kind:100,
						oid:this.videoId
					}
				}).then((d) => {
					let date = new Date()
					for(let a = 0 ;a<d.data.comment_list.length;a++){
						//刚刚
						if(date-d.data.comment_list[a].create_time*1000<60*1000){  //60s
							d.data.comment_list[a].newTime = '刚刚'
						}else if(date-d.data.comment_list[a].create_time*1000<5*60*1000){ //5min
							d.data.comment_list[a].newTime = '5分钟之内'
						}else if(date-d.data.comment_list[a].create_time*1000<30*60*1000){ //30min
							d.data.comment_list[a].newTime = '30分钟之内'
						}else if(date-d.data.comment_list[a].create_time*1000<3*60*60*1000){ //3h
							d.data.comment_list[a].newTime = '3小时之内'
						}else if(date-d.data.comment_list[a].create_time*1000<24*60*60*1000){ //24
							d.data.comment_list[a].newTime = '24小时之内'
						}else {
							let plDate = new Date(d.data.comment_list[a].create_time*1000)
							let month = plDate.getMonth()
							let day = plDate.getDate()
							if(date.getFullYear() == plDate.getFullYear()){
								d.data.comment_list[a].newTime = (month+1 < 10 ? '0' + (month + 1) : (month + 1)) + '-' + (day < 10 ? '0' + day : day)
							}else{
								d.data.comment_list[a].newTime = plDate.getFullYear() + '-' + (month+1 < 10 ? '0' + (month + 1) : (month + 1)) + '-' + (day < 10 ? '0' + day : day) 
							}
						}
					}
					
					console.log(d.data)
					this.commentList = [...this.commentList, ...d.data.comment_list];
                    if (this.commentList.length >= d.data.comment_total ) {
                        /* 所有数据加载完毕 */
                        this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.loadedDone');
                        return;
                    }

                    /* 单次请求数据完毕 */
                    this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.finishLoad');

                    this.pageNum++;
				})
			},
			//请求视频详情
			getVideoDetail(audioFlg){
				this.$root.ajax({
					name: 'hqc/video',
					type:'get',
					params: {
						id:this.videoId
					}
				}).then((d) => {
					if(audioFlg){
						let audio = this.$refs.audioRef
						let time = this.$refs.audioRef.duration
						audio.src = d.data.video.url
						audio.loop = true
						this.audioPlayTime = '00:00'
						this.audioAllTime = '00:00'
						this.palyVal = 0
						this.mp3Play = true
						this.palyTime = 1;
						if(setTimeCourse){
							clearTimeout(setTimeCourse)
						}
						//audio.play()
						//this.palyTimeFun(time)
					}
					
					this.dataObj=Object.assign({},this.dataObj,d.data.video);
					this.palyList = d.data.video_list;
					this.$nextTick(()=>{
						if(this.palyList.length>2){
							this.playListStyle={
								width:(this.$refs.playListItemRef[0].offsetWidth+this.$refs.playListItemRef[1].offsetWidth*(this.palyList.length-1) )+'px'
							}
						}else if(this.palyList.length==1){
							this.playListStyle={
								width:(this.$refs.playListItemRef[0].offsetWidth )+'px'
							}
						}
					})
					
					//分享
					if(this.$root.isWeiXin()){
						//分享
						let query = '';
						if(this.$root.config.channel){
						 	query = `params=channelDY2FGoldUrlStrDY${this.$route.name}FGkeyNumDY1FGparamsKey1DYidFGparamsVal1DY${this.dataObj.id}`
						}else{
						 	query = `params=oldUrlStrDY${this.$route.name}FGkeyNumDY1FGparamsKey1DYidFGparamsVal1DY${this.dataObj.id}`
						}
						this.$root.wxShare({
							d:this.dataObj,//分享对象，题目等{title:'',title-img:''}
							query: query,//参数
							desc:`${this.dataObj.watch_count}次播放`//分享详情
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	@import './courseAudioDetail.scss';
</style>